package com.eliza.base.compoment


import android.view.animation.OvershootInterpolator
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.eliza.base.R
import kotlinx.coroutines.delay


//visible：用于控制内容是否可见
//modifier：通用 Modifier ，用于修饰控件
//enter：进入动画，即控件从隐藏到现实的动画
//exit：退出动画，即控件从显示到隐藏的动画
//label：动画标签，跟上一篇介绍的 Transition 的 label 作用一直，用于动画预览时起标识作用
//content：内容，是一个函数类型参数，函数内需返回一个 Composable 的控件

@Composable
fun SplashBgTwo(splashViewModel: SplashViewModel) {
    val visible = splashViewModel.showSplash
    LaunchedEffect(key1 = true) {
        splashViewModel.change()
    }
    AnimatedVisibility(
        modifier = Modifier.clickable {
        },
        visible = visible,
        //  fade： 淡入淡出动画
        //  slide：滑动入场、出场动画
        //  changeSize：改变尺寸大小的入场、出场动画
        //  scale：缩放方式的入场、出场动画
        enter = slideInVertically() + fadeIn(
            initialAlpha = 0.1f,
            animationSpec = tween(100),
        ),
        exit = slideOutHorizontally() + fadeOut(
            animationSpec = tween(200),
            targetAlpha = 0.1f
        )
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxSize(),
            painter = painterResource(id = R.drawable.ic_launcher),
            contentScale = ContentScale.FillWidth,
            contentDescription = null
        )
    }
}

@Composable
fun SplashBgThree() {
    val alphaAnimation = remember {
        Animatable(0f)
    }
    //LaunchedEffect 在可组合项进入组合时运行。它会在可组合项启动时启动动画，您可以使用它来推动动画状态的变化。
    // 结合使用 Animatable 和 animateTo 方法，以在启动时启动动画：
    LaunchedEffect(key1 = true) {
        delay(10L)
        alphaAnimation.animateTo(1f)
    }
    AnimatedVisibility(
        visible = true,
        modifier = Modifier.graphicsLayer {
            alpha = alphaAnimation.value
        },
        //  fade： 淡入淡出动画
        //  slide：滑动入场、出场动画
        //  changeSize：改变尺寸大小的入场、出场动画
        //  scale：缩放方式的入场、出场动画
        enter = fadeIn(
            initialAlpha = 0.5f,
            animationSpec = tween(100),
        ),
        exit = fadeOut(
            animationSpec = tween(100),
            targetAlpha = 0.1f
        )
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxSize(),
            painter = painterResource(id = R.drawable.aniya_mini),
            contentScale = ContentScale.FillWidth,
            contentDescription = null
        )
    }
}


@Composable
fun SplashBgOne(splashViewModel: SplashViewModel) {
    val alphaAnim = remember {
        Animatable(0.5f)
    }
    val cornerAnim = remember {
        Animatable(50f)
    }
    val scaleAnim = remember {
        Animatable(0.2f)
    }
//    targetValue：动画目标值
//    animationSpec：动画规格配置，这个前面几篇文件进行了详细介绍，共有 6 种动画规格可进行设置
//    initialVelocity：初始速度
//    block：函数类型参数，动画运行的每一帧都会回调这个 block 方法，可用于动画监听

    LaunchedEffect(key1 = true) {
        alphaAnim.animateTo(
            targetValue = 1.0f,
            animationSpec = tween(
                durationMillis = 3000,
                easing = {
                    OvershootInterpolator(0.8f).getInterpolation(it)
                }
            ), initialVelocity = 1f

        )
        cornerAnim.animateTo(targetValue = 1.0f,
            animationSpec = tween(
                durationMillis = 1000,
                easing = {
                    OvershootInterpolator(0.8f).getInterpolation(it)
                }
            )
        )
        scaleAnim.animateTo(targetValue = 1.0f,
            animationSpec = tween(
                durationMillis = 1000,
                easing = {
                    OvershootInterpolator(0.6f).getInterpolation(it)
                }
            )
        )
    }
    Image(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxSize()
            .scale(scaleAnim.value)
            .alpha(alpha = alphaAnim.value)
            .clip(shape = RoundedCornerShape(1.dp.times(cornerAnim.value.toInt()))),
        painter = painterResource(id = R.drawable.ic_launcher),
        contentScale = ContentScale.FillBounds,
        contentDescription = null
    )
}
//这里使用的是 LaunchedEffect来开启协程，他是 Compose 提供的专用协程开启方法，
// 其特点是不会在每次 UI 重组时都重新启动协程，
// 只会在 LaunchedEffect 参数发生变化时才会重新启动协程执行协程中的代码。


@Composable
fun simpleSplash() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher),
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
        )
    }
}